import type { MDXComponents } from "mdx/types";
import Image, { ImageProps } from "next/image";


export function useMDXComponents(components: MDXComponents): MDXComponents {
    return {
        // Allows customizing built-in components, e.g. to add styling.
        h3: ({ children }) => (
            <h3 style={{ color: "black", fontSize: "32px", margin: "20px 0" }}>{children}</h3>
        ),
        // img: (props) => (
        //     <Image
        //         sizes="100vw"
        //         width="100"
        //         style={{ width: "100%", height: "auto" }}
        //         {...(props as ImageProps)}
        //     />
        // ),
        ...components,
    };
}